<template>
    <div>
        <div :id="id" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
            <div class="modal-dialog" :style="dialogCSS">
                <div class="modal-content" style="position: relative;">
                    <loading :show="loading"></loading>
                    <div class="modal-header">
                        <h4 class="modal-title">
                            <slot name="header"></slot>
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        </h4>
                    </div>
                    <div class="modal-body">
                        <slot name="body"></slot>
                    </div>
                    <div class="modal-footer">
                        <slot name="footer">
                            <button type="button" class="btn btn-default waves-effect" data-dismiss="modal"  @click="close">Close</button>
                            <button v-if="action !== 'show'" type="button" class="btn btn-danger waves-effect waves-light" @click="submit">Submit</button>
                        </slot>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import Loading from '@/components/widgets/Loading.vue'
    export default {
        name: 'modal',
        components: {Loading},
        props: {
            id: {
                type: String,
                default: 'my-modal'
            },
            show: {
                type: Boolean,
                default: false
            },
            height: {
                type: Number,
                default: 0
            },
            action: {
                type: String,
                default: 'edit'
            },
            dialogCSS: {
                type: Object,
                default: null
            },
            loading: {
                type: Boolean,
                default: false
            }
        },
        mounted() {
            if (this.show) {
                $(`#${this.id}`).modal()
            }
            if (this.height !== 0) {
                $(`#${this.id} .modal-body`).slimScroll({'height':this.height + 'px',position:"right",size:"6px",color:"rgba(0,0,0,0.5)"})
            }
            $(`#${this.id}`).on('hide.bs.modal', () => {
                this.$emit('update:show', false)
            })
        },
        methods: {
            close() {
                this.$emit('update:show', false)
                this.$emit('close')
            },
            submit() {
                this.$emit('submit')
            }
        },
        watch: {
            show() {
                if (this.show) {
                    $(`#${this.id}`).modal()
                    this.$emit('update:show', true)
                } else {
                    this.$emit('update:show', false)
                    $(`#${this.id}`).modal('hide')
                }
            }
        },
    }
</script>